<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo4</title>
</head>
<body>
    <div class="demo1">
        <p class="p1">111</p>
        <p class="p2">222</p>
        <p class="p3">333</p>
    </div>
</body>
<script>
    let element = document.createElement("h1");
    element.innerHTML = "九转苍翎";
    let demo1 = document.querySelector(".demo1");
    demo1.appendChild(element);//尾插法
    let new_element = document.createElement("p");
    new_element.innerHTML = "new_element";
    demo1.insertBefore(new_element,document.querySelector(".p1"));
    demo1.insertBefore(new_element,document.querySelector(".p2"));
    demo1.insertBefore(new_element,document.querySelector(".p3"));
    element.innerHTML = "逆天而行";
</script>
</html>